﻿@page "/datagrid/row-template"

@using Syncfusion.Blazor.Grids
@using blazor_griddata
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper

@inherits SampleBaseComponent;

<SampleDescription>
  <p>This sample demonstrates the DataGrid component with the row template feature. In this sample, we have rendered each DataGrid row using the template.</p>  
</SampleDescription>
<ActionDescription>
   <p>The RowTemplate has option to customize the look and behavior of the DataGrid rows. The <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate'>RowTemplate</a></code> should be wrapped around the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridTemplates.html'>GridTemplates</a></code> component. The RowTemplate content must be <strong>TD</strong> elements and the number of <strong>TD</strong> elements should match the number of DataGrid columns.</p>
   <p>In this demo, we have presented Employee Information with Employee Photo in the first column and Employee details like Name, Address etc. in the second column.</p>
   <p>More information on the Templates feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/templates/'>documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid DataSource="@GridData" Height="335">
                <GridTemplates>
                    <RowTemplate>
                        @{
                            var employee = (context as Employee);
                            <td class="photo">
                                 <img src="@UriHelper.ToAbsoluteUri($"images/data-grid/{employee.EmployeeID}.png")" alt="@employee.EmployeeID" />                            </td>
                            <td class="details">
                                <table class="CardTable" cellpadding="3" cellspacing="2">
                                    <colgroup>
                                        <col width="50%">
                                        <col width="50%">
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td class="CardHeader">First Name </td>
                                            <td>@employee.FirstName </td>
                                        </tr>
                                        <tr>
                                            <td class="CardHeader">Last Name</td>
                                            <td>@employee.LastName </td>
                                        </tr>
                                        <tr>
                                            <td class="CardHeader">
                                                Title
                                            </td>
                                            <td>
                                                @employee.Title
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="CardHeader">
                                                Birth Date
                                            </td>
                                            <td>
                                                @employee.BirthDate.ToShortDateString()
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="CardHeader">
                                                Hire Date
                                            </td>
                                            <td>
                                                @employee.HireDate.ToShortDateString()
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        }
                    </RowTemplate>
                </GridTemplates>
                <GridColumns>
                    <GridColumn HeaderText="Employee Image" Width="150" TextAlign="TextAlign.Center" > </GridColumn>
                    <GridColumn HeaderText="Employee Details" Width="200" TextAlign="TextAlign.Center"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

@code{

    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = Employee.GetAllRecords();
    }
}

<style type="text/css" class="cssStyles">
    .photo img {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
    }

    .photo,
    .details {
        border-color: #e0e0e0;
        border-style: solid;
    }

    .photo {
        border-width: 1px 0px 0px 0px;
        text-align: center;
    }

    .details {
        border-width: 1px 0px 0px 0px;
        padding-left: 18px;
    }

    .e-bigger .details {
        padding-left: 25px;
    }

    .e-device .details {
        padding-left: 8px;
    }

    .details > table {
        width: 100%;
    }

    .CardHeader {
        font-weight: 600;
    }

    td {
        padding: 2px 2px 3px 4px;
    }
</style>